<template>
	<view class="container">
		<view class="form-box">
			<view class="form">
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">姓名</view>
						 <input class="input" placeholder="请输入姓名" v-model="name" placeholder-class="text-color-assist"/>
					</view>
				</list-cell>
				
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">手机号码</view>
						 <input class="input" placeholder="请输入手机号码"  v-model="phone" placeholder-class="text-color-assist"/>
					</view>
				</list-cell>
				
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">身份证号</view>
						 <input class="input" placeholder="请输入身份证号"  v-model="card" placeholder-class="text-color-assist"/>
					</view>
				</list-cell>
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">关系</view>
						 <input class="input" placeholder="请输入关系本人或他人"  v-model="guanxi" placeholder-class="text-color-assist"/>
					</view>
				</list-cell>
			</view>
			<view class="btn-section">
				<button type="primary" size="default" @tap="save">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import mm from '../../api/member.js'
	export default {
		components: {
			listCell
		},
		data() {
			return {
				form: {
					name:'',
					guanxi: '',//他人  或 本人 关系
					phone: '',
					card:'',
					inp:0
				}
			}
		},
		async onLoad({id}) {
			//为了方便演示，这里用本地缓存
			if(id) {
				this.form = this.$store.state.addresses.find(item => item.id == id)
			}
		},
		
		methods: {
			save() {
				console.log(this.name)
				if(this.guanxi.equals("本人")){
					this.inp=1
				}
				var data = {
					info: JSON.stringify({
				
						"openid": mm.openid,
						"name":this.name,
						"phone":this.phone,
						"card":this.card,
						"sex":this.guanxi,
						"thepatient":this.inp
					})
				};
				this.$api.addjiuzhenren(data).then(res => {
					console.log('查到的数据:' + JSON.stringify(res));
					if(!res){
						uni.showToast({
							title: '用户已经存在或系统错误',
							icon: 'none'
						});
					}else{
						uni.showToast({
							title: '绑定成功',
							icon: 'none'
						});
					}
				
				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});
				
				})
				
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		color: $text-color-base;
		
		.form-input {
			display: flex;
			align-items: center;
			width: 100%;
		}
		
		.label {
			width: 200rpx;
			font-size: $font-size-lg;
			color: $text-color-base;
			font-weight: 500;
		}
		
		.input {
			flex: 1;
			display: flex;
			align-items: center;
		}
		
		.radio-group {
			display: flex;
			justify-content: flex-start;
			
			.radio {
				padding: 10rpx 30rpx;
				border-radius: 6rpx;
				border: 2rpx solid $text-color-assist;
				color: $text-color-assist;
				font-size: $font-size-base;
				
				&.checked {
					background-color: #3ECEB6;
					color: $text-color-white;
					border: 2rpx solid #3ECEB6;
				}
			}
		}
		
		.btn-section {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			button {
				background-color: #3ECEB6;
				font-size: $font-size-base;
				height: 90rpx;
				border-radius: 50rem !important;
				width: 85%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
